<template>
  <el-dialog
    v-dialogDrag
    :title="dataScopeTitle"
    :visible.sync="dialogdataScope"
    class="dialogStyleMiddle"
    :before-close="cancel"
    append-to-body
  >
    <div style="text-align:left">
      <div>{{ menuName }} :</div>
      <el-table :data="dataScopList" style="width: 100%" border size="mini" max-height="300">
        <el-table-column type="index" width="51" label="序号" align="center" />
        <el-table-column prop="dataObjName" label="菜单类型" width="180" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="dataObjTypeDataScope" label="权限范围" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.dataObjTypeDataScope[0]=== '1'">全部数据权限</span>
            <span
              v-if="scope.row.dataObjTypeDataScope[0]=== '2' && scope.row.isRowOrCol[0]=== '1'"
            >自定数据权限/启用自定义列</span>
            <span
              v-if="scope.row.dataObjTypeDataScope[0]=== '2' && scope.row.isRowOrCol[0]=== '2'"
            >自定数据权限/禁用自定义列</span>
            <span v-if="scope.row.dataObjTypeDataScope[0]=== '3'">本部门数据权限</span>
            <span v-if="scope.row.dataObjTypeDataScope[0]=== '4'">本部门及以下数据权限</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isShow"
          label="状态"
          :filters="[{ text: '显示', value: '0' }]"
          :filter-method="filterIsShow"
          :filtered-value="quesCheckList"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isShow === '0'">显示</span>
            <span v-if="scope.row.isShow === '1'">隐藏</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <!-- <el-button
              @click.native.prevent="deleteRow(scope.$index, dataScopList)"
              type="text"
              size="small"
            >删除</el-button>-->
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form
        ref="dataScopeTypeFrom"
        :model="dataScopeTypeMenu"
        :rules="rules"
        label-width="auto"
        style="margin-top:20px;"
      >
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="菜单选择" prop="menuId">
              <treeselect
                v-model="dataScopeTypeMenu.menuId"
                :options="menuOptions"
                :show-count="true"
                placeholder="选择上级菜单"
                clearable
                size="medium "
                :disabled="true"
                style="width:280px"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="dataObjType">
              <el-select v-model="dataScopeTypeMenu.dataObjType" disabled style="width:280px">
                <el-option
                  v-for="item in dataObjTypeOptions"
                  :key="item.dataObjType"
                  :label="item.dataObjName"
                  :value="item.dataObjType"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限范围" prop="dataObjTypeDataScope">
              <el-cascader
                v-model="dataScopeTypeMenu.dataObjTypeDataScope"
                style="width:280px"
                :options="deptDataScopeOptions"
                @change="changedeptDataScope"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('dataScopeTypeFrom')">更新</el-button>
      <el-button type="primary" @click="submitAll">确认</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @dataScopListDelList="getDataScopListDelList"
    />
  </el-dialog>
</template>

<script>
// 菜单下拉树用的的方法和样式
import AddOrUpdate from '@/components/System/Role/RoleDataScopeDet'
// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { selectTreeMenuAll } from '@/api/system-tool/menu'
export default {
  name: 'DataScope',
  components: { AddOrUpdate },
  data() {
    return {
      dataScopeTitle: '',
      dialogdataScope: false,
      /** 表格数据修改 start */
      // 为那个菜单分配权限
      menuName: '',
      dataScopeTypeMenu: {
        // 下标
        index: '',
        // 菜单id
        menuId: '',
        // 主题类型（角色，用户，组）
        objType: '',
        // 菜单类型名称
        dataObjName: '',
        // 给那个菜单类型赋值权限
        dataObjType: '',
        // 存储权限的范围（本部门数据权限/自定义数据权限）
        dataObjTypeDataScope: [],
        // 是否启用自定义列 1启用 2不启用
        isRowOrCol: '',
        // 此菜单类型是否显示 0显示 1不显示
        isShow: '',
        // 用于封装子类 回传选中了那些行/那些列
        dataScopListDelList: []
      },
      // 设置表格的默认选择项
      quesCheckList: ['0'],
      // 用于封装 本页面 设置的菜单类型和数据范围
      dataScopList: [],
      // 菜单树
      menuOptions: [],
      // 数据范围选项
      deptDataScopeOptions: [
        {
          value: '1',
          label: '全部数据权限'
        },
        {
          value: '2',
          label: '自定数据权限',
          children: [
            {
              value: '1',
              label: '启用自定义列'
            },
            {
              value: '2',
              label: '禁用自定义列'
            }
          ]
        },
        {
          value: '3',
          label: '本部门数据权限'
        },
        {
          value: '4',
          label: '本部门及以下数据权限'
        }
      ],
      // 菜单类型
      dataObjTypeOptions: [],
      // 校验
      rules: {
        dataObjType: [{ required: true, message: '必填', trigger: 'blur' }],
        dataObjTypeDataScope: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      // 自定义弹框详情
      addOrUpdateVisible: false
    }
  },
  mounted: function() {},
  methods: {
    // 接受父类的传值
    showAddMenuView(objType, data, event) {
      var _this = this
      _this.dataScopeTitle = '菜单选择数据权限'
      // 打开对话框
      _this.dialogdataScope = true
      // 获取菜单下拉树结构
      // _this.getMenuTree()
      // 判断是类型是角色/用户/兼职部门
      _this.dataScopeTypeMenu.objType = objType
      // 菜单id
      _this.dataScopeTypeMenu.menuId = data.menuId
      _this.menuName = data.menuName
      /**
       * 编辑的时候需要显示的数据权限
       * 加载次节点的数据权限
       */
      if (data.dataScopList.length > 0) {
        // 此节点的全部数据权限
        var dataScopList = data.dataScopList
        this.dataScopList = dataScopList
        // 菜单类型数组
        _this.dataObjTypeOptions = []
        for (var i = 0; i < dataScopList.length; i++) {
          // 菜单类型是可编辑的时候 0：可编辑 1:不可编辑
          if (dataScopList[i].isShow.toStirng() === '0') {
            var dataObjName = dataScopList[i].dataObjName
            var dataObjType = dataScopList[i].dataObjType
            var dataObj = _this.createDataObj(dataObjName, dataObjType)
            _this.dataObjTypeOptions.push(dataObj)
          }
        }
      }
    },
    // 筛选表格行数据 显示isShow===0 的时候
    filterIsShow(value, row) {
      return row.isShow === value
    },
    // 创建菜单类型对象
    createDataObj(dataObjName, dataObjType) {
      var DataObj = {}
      DataObj['dataObjName'] = dataObjName
      DataObj['dataObjType'] = dataObjType
      return DataObj
    },
    // 清空表格中每条行的数据
    emptyDataScope() {
      this.dataScopeTypeMenu = {
        // 下标
        index: '',
        // 菜单id
        menuId: '',
        // 主题类型（角色，用户，组）
        objType: '',
        // 菜单类型名称
        dataObjName: '',
        // 给那个菜单类型赋值权限
        dataObjType: '',
        // 存储权限的范围（本部门数据权限/自定义数据权限）
        dataObjTypeDataScope: [],
        // 是否启用自定义列 1启用 2不启用
        isRowOrCol: '',
        // 此菜单类型是否显示 0显示 1不显示
        isShow: '',
        // 用于封装子类 回传选中了那些行/那些列
        dataScopListDelList: []
      }
      this.resetForm('dataScopeTypeFrom')
    },
    // 用于清空该节点选中的数据权限中封装的对象
    emptyData() {
      this.dataScopeTypeMenu.index = ''
      this.dataScopeTypeMenu.dataObjName = ''
      this.dataScopeTypeMenu.dataObjType = ''
      this.dataScopeTypeMenu.dataObjTypeDataScope = []
      this.dataScopeTypeMenu.isRowOrCol = ''
      this.dataScopeTypeMenu.isShow = ''
      this.dataScopeTypeMenu.dataScopListDelList = []
    },
    // 查询菜单下拉树结构
    getMenuTree() {
      var _this = this
      selectTreeMenuAll().then(resp => {
        if (resp) {
          _this.menuOptions = resp.data
        }
      })
    },
    // async loadOptions({ action /*, callback*/ }) {
    //   if (action === LOAD_ROOT_OPTIONS) {
    //     if (!called) {
    //       // First try: simulate an exception.
    //       await sleep(2000) // Simulate an async operation.
    //       called = true
    //       throw new Error('Failed to load options: test.')
    //     } else {
    //       // Second try: simulate a successful loading.
    //       await sleep(2000)
    //       this.getMenuTree()
    //     }
    //   }
    // },

    /**
     * 判断是否是自定义数据权限时弹出的框
     * val:权限范围的值
     */
    changedeptDataScope(val) {
      if (val[0] === '2') {
        // 自定义行和列的弹框
        this.addOrUpdateVisible = true
        // 是给菜单的那个类型分配数据权限
        var dataObjType = this.dataScopeTypeMenu.dataObjType
        // 给那个菜单分数据权限
        var menuId = this.dataScopeTypeMenu.menuId
        // 判断是否自定义列/不自定义列数据权限
        var dataObjTypeDataScope = this.dataScopeTypeMenu.dataObjTypeDataScope
        // ------编辑的时候需要传到子类的值-----------
        var dataScopListDelList = this.dataScopeTypeMenu.dataScopListDelList
        this.$nextTick(() => {
          this.$refs.addOrUpdate.showObjectView(
            dataObjType,
            menuId,
            dataObjTypeDataScope,
            dataScopListDelList
          )
        })
      } else {
        this.addOrUpdateVisible = false
        // 当数据不是自定义权限时 封装自定义数据字段dataScopListDelList为空数组
        this.dataScopeTypeMenu.dataScopListDelList = []
      }
    },
    // 接受子组件传过来的值
    getDataScopListDelList(dataScopListDelList) {
      this.dataScopeTypeMenu.dataScopListDelList = dataScopListDelList
    },

    /**
     * 创建对象 dataObjName:菜单类型名称，dataObjType菜单类型
     *          dataObjTypeDataScope:菜单数据权限类型
     *          dataScopListDelList :自定义数据权限详情
     *          isShow :此类型菜单是否显示
     */
    createDataScop(
      dataObjName,
      dataObjType,
      dataObjTypeDataScope,
      dataScopListDelList,
      isShow
    ) {
      // 创建用于存放数据权限内容的对象
      var DataScop = {}
      DataScop['dataObjName'] = dataObjName
      DataScop['dataObjType'] = dataObjType
      // 获取数据权限类型的值（除出最后一个的字符）
      var dataObjTypeDataScopeNoLast = dataObjTypeDataScope.slice(0, -1)
      // 获取数据权限类型的最后一位值
      var end = dataObjTypeDataScope.slice(-1)
      if (dataObjTypeDataScopeNoLast[0] === '2') {
        DataScop['dataObjTypeDataScope'] = dataObjTypeDataScopeNoLast
        DataScop['isRowOrCol'] = end
      } else {
        DataScop['dataObjTypeDataScope'] = dataObjTypeDataScope
        DataScop['isRowOrCol'] = ['2']
      }
      /**
       * 当自定义数据权限时 且自定义数据不为空时 存储到dataScopListDelList中
       *                      自定义数据为空 dataScopListDelList =[]
       */
      if (
        dataObjTypeDataScopeNoLast[0] === '2' &&
        dataScopListDelList.length > 0
      ) {
        DataScop['dataScopListDelList'] = dataScopListDelList
      } else if (
        dataObjTypeDataScopeNoLast === '2' &&
        dataScopListDelList.length === 0
      ) {
        DataScop['dataScopListDelList'] = null
      }
      DataScop['isShow'] = isShow
      return DataScop
    },
    // 编辑
    handleEdit(index, row) {
      this.dataScopeTypeMenu.dataObjTypeDataScope = []
      this.dataScopeTypeMenu.index = index
      this.dataScopeTypeMenu.dataObjName = row.dataObjName
      this.dataScopeTypeMenu.dataObjType = row.dataObjType
      if (row.dataObjTypeDataScope[0] === '2') {
        this.dataScopeTypeMenu.dataObjTypeDataScope.push(row.dataObjTypeDataScope[0])
        this.dataScopeTypeMenu.dataObjTypeDataScope.push(row.isRowOrCol[0])
      } else {
        this.dataScopeTypeMenu.dataObjTypeDataScope = row.dataObjTypeDataScope
      }
      // 当数据权限是自定义时
      if (row.dataScopListDelList != null) {
        this.dataScopeTypeMenu.dataScopListDelList = row.dataScopListDelList
      }
      // 如果是自定义选型 弹出选择自定义行的对话框
      this.changedeptDataScope(row.dataObjTypeDataScope)
      this.dataScopeTypeMenu.isShow = row.isShow
    },
    // 单个添加按钮
    submitForm(from) {
      var _this = this
      this.$refs[from].validate(valid => {
        if (valid) {
          var index = _this.dataScopeTypeMenu.index + ''
          if (typeof index === 'undefined' || index === null || index === '') {
            return this.msgError('该菜单类型的数据权限已经存在')
          } else {
            var dataObjName = this.dataScopeTypeMenu.dataObjName
            var dataObjType = this.dataScopeTypeMenu.dataObjType
            // 数据权限类型
            var dataObjTypeDataScope = this.dataScopeTypeMenu
              .dataObjTypeDataScope
            // 自定义数据权限详情
            var dataScopListDelList = this.dataScopeTypeMenu
              .dataScopListDelList
            // 该菜单类型是否显示
            var isShow = this.dataScopeTypeMenu.isShow
            // 更新
            var dataScope = this.createDataScop(
              dataObjName,
              dataObjType,
              dataObjTypeDataScope,
              dataScopListDelList,
              isShow
            )
            // 替换编辑以前的数据
            this.dataScopList.splice(index, 1, dataScope)
          }
          // 清空封装数据权限的对象
          this.emptyData()
        } else {
          return false
        }
      })
    },
    // 创建存放菜单id和数据权限的menu对象
    createMenuData(menuId, dataScopList) {
      var menuData = {
        'menuId': menuId,
        'dataScopList': dataScopList
      }
      return menuData
    },
    // 全部添加并且把值传回给父类
    submitAll() {
      // 封装菜单id和数据权限的对象
      var menuData = this.createMenuData(
        this.dataScopeTypeMenu.menuId,
        this.dataScopList
      )
      this.$emit('menuData', menuData)
      // 数据提交到服组件之后 用于封装数据行数据和列数据的数组设置为空
      this.dataScopList = []
      this.cancel()
    },
    // 弹框取消按钮
    cancel() {
      // 弹框关闭
      this.dialogdataScope = false
      // 用于封装数据行数据和列数据的数组设置为空
      this.dataScopList = []
      // 清空菜单类型数组
      this.dataObjTypeOptions = []
      // 清空表格中的一条数据
      this.emptyDataScope()
    },

    /** 顶部表格的删除和编辑 start*/
    deleteRow(index, rows) {
      // 删除表格的数据
      rows.splice(index, 1)
    }
  }
}
</script>
